<template>
  <div>
    <div class="brand">
      <div class="brand-a">
        <!-- 品牌名 -->
       <img src="../assets/Brandzone/01.jpg" alt="">
      </div>
      <div class="brand-b">
        <!-- 品牌图 -->
        <img src="../assets/Brandzone/02.jpg" alt="">
      </div>
      <div class="brand-c"  v-for="(item,index) in goodslist" :key="index">
          <div class="brand-d">
          <!-- 产品图 -->
          <img :src="item.img" alt="">
           <!-- 原价 -->
          <span>￥{{item.price}}</span>
          <!-- 原价 -->
          <span style="color:#e0e0e0;text-decoration:line-through">￥{{item.price2}}</span>
        </div>
        <div class="brand-d">
          <p>查看更多</p>
          <p>MORE+</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Brandzone",
  data: function() {
    return {
      goodslist: [
        {
           img: require("../assets/Brandzone/06.jpg"),
          price: 667,
          price2: 509
        },
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.brand {
  width: 100%;
  height: 330px;
  // background-color: blue;
}
.brand-a {
  width: 100%;
  height: 35px;
  margin: 0 auto;
  margin-top: 10px;
}
.brand-a img {
  width: 100%;
}
.brand-b {
  width: 100%;
  height: 144px;
  margin-top: 10px;
  margin-left: 10px;
}

.brand-b img {
  width: 100%;
}
.brand-c {
  width: 100%;
  height: 157px;
  // background-color: pink;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.brand-c img {
  width: 97px;
  height: 97px;
}
.brand-c span {
  width: 70px;
  height: 16px;
  font-size: 10px;
  margin-left: 10px;
  margin-top: 10px;
}

.brand-d {
  width: 100px;
  height: 135px;
  text-align: center;
}
.brand-d p {
  width: 100px;
  height: 16px;
  line-height: 80px;
  font-size: 13px;
}
</style>